<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
	
		<input type="text"  v-model.number="msg" placeholder="edit me" />
		<p>{{msg}}</p>
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label>
		
		<div id='example-3'>
		  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		  <label for="jack">Jack</label>
		  <input type="checkbox" id="john" value="John" v-model="checkedNames">
		  <label for="john">John</label>
		  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		  <label for="mike">Mike</label>
		  <br>
		  <span>Checked names: {{ checkedNames }}</span>
		</div>
		<div id="example-4">
		  <input type="radio" id="one" value="One" v-model="picked">
		  <label for="one">One</label>
		  <br>
		  <input type="radio" id="two" value="Two" v-model="picked">
		  <label for="two">Two</label>
		  <br>
		  <span>Picked: {{ picked }}</span>
		</div>
		<div id="example-5">
		  <select multiple v-model="selected">
		    <option disabled value="">请选择</option>
		    <option>A</option>
		    <option>B</option>
		    <option>C</option>
		  </select>
		  <span>Selected: {{ selected }}</span>
		</div>
	   </div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					msg:'',
					checked:false,
					checkedNames:[],
					picked:'',
					selected:[]
				}
				
			})
		</script>
	</body>
	
	
</html>
